<template>
  <div class="container_outside" id="outside" ref="outside">
    <div class="container_inside">
      <div class="area_title" v-if="!!areaTitle">
        <div class="area_title_bg" :style="{ width: areaTitleWidth }">
          {{ areaTitle }}
        </div>
      </div>
      <div :class="{'area-content': true, 'has_title': !!areaTitle}">
        <slot></slot>
      </div>
    </div>
  </div>
</template>

<script lang="ts">

import {  } from "@vueuse/core";
import { reactive, toRefs, onMounted } from 'vue'
export default {
  name: "topTabs",
  props: {
    areaTitleWidth: {
      type: String,
      default: "358px"
    },
    areaTitle: {
      type: String,
      default: ""
    },
    showChangeLine: {
      type: Boolean,
      default: false
    }
  },
  setup() {
    // const state = reactive({
    //   outside: null
    // })
    // onMounted(() => {
    //
    //   state.outside.style.border = '2px solid #ff0000'
    // })
    // return {
    //   ...toRefs(state)
    // }
  },
  data () {
    return {

    }
  },
  watch: {
    showChangeLine: {
      handler (val) {
        if (val) {
          this.$refs.outside.style.border = '4px solid #ffffff'
        } else {
          this.$refs.outside.style.border = '1px solid #0174f5'
        }
        this.$forceUpdate()
      }
    }
  },
  mounted() {
    // this.$nextTick(() => {
      // this.$refs.outside.style.transition = 'all 1s'
      // this.$refs.outside.style.transform = 'scale(1.05)'
      // this.$refs.outside.style.border = '4px solid #ff0000'
      // setTimeout(() => {
      //   this.$refs.outside.style.transform = 'scale(1)'
      //   this.$refs.outside.style.border = '1px solid #016ae0'
      // }, 1500)
      // this.$refs.outside.style.border = '4px solid #fff'
    // })
  },
  // watch: {
  //   active (val) {
  //   }
  // },
  methods: {
  }
};
</script>

<style scoped lang="scss">
.container_outside {
  width: 100%;
  height: 100%;
  border-radius: 10px;
  border: 1px #0174f5 solid;
  padding: 1px;
  box-sizing: border-box;
  overflow: hidden;
  transition: all 1s ease;
  .container_inside {
    width: 100%;
    height: 100%;
    box-sizing: border-box;
    border: 2px solid #016ae0;
    border-radius: 10px;
    overflow: hidden;
    position: relative;
    .area_title {
      width: 100%;
      display: flex;
      justify-content: center;
      height: 28px;
      margin: auto;
      .area_title_bg {
        height: 100%;
        background-image: url("../../../../../assets/images/area_title.png");
        background-size: 100%;
        background-repeat: no-repeat;
        text-align: center;
        color: #FFFFFF;
        line-height: 28px;
      }
    }
    .area-content {
      height: 100%;
    }
    .has_title {
      height: calc(100% - 28px);
    }
  }
}
</style>
